import React, { useEffect, useState } from 'react'
import { Card, Typography } from 'antd'
import { getSchema } from '../service/index'

const { Title, Paragraph } = Typography

export const TestPage: React.FC = () => {
  const [schemaData, setSchemaData] = useState<any>(null)
  const [loading, setLoading] = useState(false)

  const onGetSchema = async () => {
    setLoading(true)
    try {
      const res = await getSchema()
      setSchemaData(res)
      console.log('TestPage: Schema loaded on route change', res)
    } catch (error) {
      console.error('TestPage: Error loading schema', error)
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => {
    onGetSchema()
  }, []) // 组件挂载时调用

  return (
    <div style={{ padding: '24px' }}>
      <Card>
        <Title level={2}>测试页面</Title>
        <Paragraph>
          这是一个测试页面，用于验证路由改变时 onGetSchema 是否被正确调用。
        </Paragraph>
        <Paragraph>当前时间: {new Date().toLocaleString()}</Paragraph>
        <Paragraph>加载状态: {loading ? '加载中...' : '已完成'}</Paragraph>
        {schemaData && (
          <Paragraph>
            Schema 数据: {JSON.stringify(schemaData, null, 2)}
          </Paragraph>
        )}
      </Card>
    </div>
  )
}
